<template>
  <div class="login-container">
    <div class="login-form">
      <h3 class="login_title">RBAC权限管理系统</h3>
      <el-form :model="loginForm"
               :rules="rules"
               style="margin: 0 15px;"
               v-loading="loading"
               ref="loginForm">
        <el-form-item prop="username">
          <el-input type="text"
                    v-model="loginForm.username"
                    auto-compele="off"
                    placeholder="请输入工号/邮箱"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="loginForm.password"
                    auto-compele="off"
                    placeholder="请输入密码"
                    show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-col :span="12">
            <el-form-item prop="code">
              <el-input
                v-model="loginForm.code"
                type="text"
                auto-complete="off"
                placeholder="请输入验证码"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>

          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="11">
            <el-form-item>
              <img
                :src="captcha_img"
                style="float: right;width: 100%;height: 40px;cursor: pointer"
                @click="getCaptcha()"
              >
            </el-form-item>
          </el-col>
        </el-form-item>
<!--              <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>-->
        <div class="register-text">
          <span @click="goRegister">注册账号</span>
        </div>
        <el-form-item style="width: 100%">
          <el-button type="primary"
                     style="width: 100%"
                     @click="submitFrom">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { login, captcha } from '@/api/auth'
  export default {
    name: 'login',
    data() {
      return {
        rules: {
          username: [{required: true, message: '请输入用户', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
        },
        captcha_img: '',
        loginForm: {
          username: '',
          password: '',
          code: ''
        },
        checked: true,
        loading: false
      }
    },
    methods: {
      submitFrom(){
        this.$refs['loginForm'].validate(valid =>{
          if(valid) {
            let data = {
              username: this.loginForm.username,
              password: this.loginForm.password
            }
            login(data, this.loginForm.code).then(res=> {
              if(res.data.code === 200) {
                localStorage.setItem('Authorization', res.data.data.token)
                this.$router.replace({ path:'/' })
              }else {
                this.getCaptcha()
              }
            }, err=> {
              this.loginForm.code = '';
              this.getCaptcha()
            })
          }
        })
      },
      getCaptcha() {
        captcha().then(res=>{
          if(res.data.code === 200) {
            let captcha = res.data.data.captcha
            this.$cookies.set('captcha_key', captcha.key, '2min')
            this.captcha_img = captcha.img
          }
        })
      },
      goRegister() {
        this.$router.push('/register')
      }
    },
    mounted() {
      this.getCaptcha()
    }
  };
</script>

<style scoped lang="scss">
  .login-container {
    background-image: url('../../assets/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .login-form{
    width: 350px;
    border-radius: 10px;
    background-clip: padding-box;
    margin: 140px auto;
    padding: 50px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 35px #cac6c6;
  }
  .login_title{
    margin-bottom: 20px;
    color: rgba(27,27,27,0.7)
  }
  .login_remember{
    margin-bottom: 20px;
    text-align: center;
  }
  .register-text {
    margin-bottom: 15px;
    text-align: right;
    span {
      font-size: 14px;
      color: #409EFF;
      cursor: pointer;
    }
  }
</style>
